<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
	<title>发送验证码</title>
</head>

<body>

	<div class="main-content-inner">
	
		<script type="text/javascript">
			// 显示万能验证
			function showcodeform(){
				$.ajax({
					type:'get',
					url:'${ctx}/universalcode/getuniversalcode',
					success:function(data){
						if(data.code != undefined ){
							document.getElementById("codeid").value=data.id;
							document.getElementById("universalcode").value=data.code;
							if(data.isopen=="1"){
								$('input[name="usecode"]:eq(0)').attr("checked",'checked');
							}else{
								$('input[name="usecode"]:eq(1)').attr("checked",'checked');
							}
						}else{
							//如果没有值说明应该是添加操作，0来标记
							document.getElementById("codeid").value="0";
							// 单选框 默认第一个选中
							$('input[name="usecode"]:eq(0)').attr("checked",'checked');
						}
						$("#myModalCode").modal('show');
					}
				})
			};
		</script>
		<!-- #section:basics/content.breadcrumbs -->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>
	
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="${ctx}/welcome">主页</a>
				</li>
				<li class="active">设置验证码</li>
			</ul><!-- /.breadcrumb -->
	
		</div>	
		<!-- /section:basics/content.breadcrumbs -->
		
		<div class="page-content">
			
			<c:if test="${not empty message}">
				<div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
			</c:if>	
			
			<div class="page-header">
				<h1>
					验证码
					<small>
						<i class="ace-icon fa fa-angle-double-right"></i>
						<c:choose>
							<c:when test="${action eq 'create' }">
								发送验证码
							</c:when>
							<c:otherwise>
								发送验证码
							</c:otherwise>
						</c:choose>
					</small>
				</h1>
			</div><!-- /.page-header -->			
			
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div class="row">
						<div class="col-xs-12">

							<form id="inputForm" action="${ctx}/customor/setmobile" method="post" class="form-horizontal">
								<input type="hidden" name="id" id="id" value="${user.id}"/>
<!-- 								<input type="hidden" name="status" value=""/> -->
<!-- 								<input type="hidden" name="userType" value="2"/> -->
								
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 手机号: </label>
									<div class="col-sm-9">
										<input type="text" maxlength="15" autocomplete="off" id="mobile" <c:if test="${action eq 'update'}">readonly="readonly"</c:if> name="mobile"  placeholder="手机号" class="col-xs-10 col-sm-5 required" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 验证码: </label>
									<div class="col-sm-9">
										<input type="text" maxlength="10" autocomplete="off" id="invitecode" name="invitecode"  readonly="readonly" value="${invitecode}" placeholder="验证码" class="col-xs-10 col-sm-5 required" />
										<input type="button" style="margin-left:15px" id="refreshcode" name="refreshcode"  value="刷新"/>
										<input type="button" hidden="hidden" id="sendcode" name="sendcode" value="发送" />
									</div>
								</div>
								
								<div class="clearfix form-actions">
									<div class="col-md-offset-3 col-md-9">
										<button id="submit_btn" name="submit_btn" class="btn btn-info" type="button">
											<i class="ace-icon fa fa-check bigger-110"></i>
											设置
										</button>

										&nbsp; &nbsp; &nbsp;
										<button id="cancel_btn" class="btn" type="reset" onclick="history.back()">
											<i class="ace-icon fa fa-undo bigger-110"></i>
											返回
										</button>&nbsp; &nbsp; &nbsp;
<!-- 										<button id="setuniversalcode" class="btn btn-info" type="button" onclick="showcodeform();"> -->
<!-- 											<i class="ace-icon fa fa-undo bigger-110"></i> -->
<!-- 											万能验证码 -->
<!-- 										</button> -->
									</div>
								</div>
								
							</form>
			<!-- 模态框（Modal） -->
			<div class="modal fade mymodel" id="myModalCode" tabindex="-1" role="dialog" 
			   aria-labelledby="myModalCode" aria-hidden="true">
			   <div class="modal-dialog">
			      <div class="modal-content">
			         <div class="modal-header">
			            <button type="button" class="close" 
			               data-dismiss="modal" aria-hidden="true">
			                  &times;
			            </button>
			            <h4 class="modal-title" id="myModalLabel">
			         		      万能验证码
			            </h4>
			         </div>
			         <div class="modal-body">
			         <form  id="universalform" class="form-horizontal" style="text-align:center" role="form">
	      			        <input type="hidden" id="codeid"/>
			         		<div class="form-group">
			            		<label class="form-label">万能码：</label>
							    <input type="text" maxlength="4" autocomplete="off" id="universalcode" name="universalcode"  placeholder="请输入4位数字" class="required" />
			         		</div>
							<div class="form-group" style="text-align:center;padding-left:149px;">
								<label class="col-sm-3 control-label" for="form-field-1">是否启用：</label>
								<div class="col-sm-2" style="margin-top:7px;width:28%">
									<input type="radio" name="usecode" value="1">启用&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="radio" name="usecode" value="0">关闭
								</div>
							</div>	
			         </form>
			         </div>
			         <div class="modal-footer">
           				<button id="saveuniversalcode" name="saveuniversalcode" class="btn btn-info" type="button">
							<i class="ace-icon fa fa-check bigger-110"></i>
							保存
						</button>
			            <button type="button" class="btn btn-default" data-dismiss="modal">
		            		关闭
			            </button>
			         </div>
			      </div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
						</div><!-- /.span -->
					</div><!-- /.row -->			
				</div>
			</div>
			
		</div><!-- /.page-content -->
	</div>



	<!-- inline scripts related to this page -->

	<script src="${ctx}/static/js/jquery.validate.min.js"></script>
	<script src="${ctx}/static/js/messages_bs_zh.js"></script>

	<script>
		$(document).ready(function() {
			//聚焦第一个输入框
			$("#mobile").focus();
			
			  // 手机号码验证    
		    jQuery.validator.addMethod("isMobile", function(value, element) {    
		      var length = value.length;    
		      return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));    
		    }, "请正确填写您的手机号码。");
			
			$("#inputForm").validate({
				onsubmit:true,
				rules:{
					mobile:{
						rangelength:[11,11],
						isMobile:true,
					}
				},
				messages: {
					mobile: {
						rangelength:"请输入11位手机号码",
						isMobile:"请输入正确的手机号码",
					}
				}
			});
			$("#refreshcode").on("click",function(){				
				$.ajax({
					type:'get',
					url:'${ctx}/customor/refreshcode',
					success:function(data) {    
				        console.log(data);
						document.getElementById("invitecode").value =data;
				     }
				});
			})
			
			$("#sendcode").on("click",function(){				
				 var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
				 if (!reg.test($("#mobile").val())) {
				      alert("号码有误~");
				      return;
				 };
				$.ajax({
					type:'get',
					url:'${ctx}/customor/sendcode',
					data:{'invitecode':$("#invitecode").val(),'mobile':$("#mobile").val()},
					success:function(data){    
				        console.log(data);
						if(data =='0'){
							alert("发送失败，请刷新页面发送或手动设置后告知用户");
							return;
						}
						if(data =='1'){
							alert("发送成功,已给用户发送");
							return;
						}
						if(data=='2'){
							alert("短信通道的原因，发送失败，请手动设置后告知用户");
							return;
						}
				     }
				});
			})
			
// 			function setrediscode(){
			$("#submit_btn").on("click",function(){				
				 var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
				 if (!reg.test($("#mobile").val())) {
				      alert("号码有误~");
				      return;
				 };
				
				$.ajax({
					type:'get',
					url:'${ctx}/customor/setrediscode',
					data:{invitecode:$("#invitecode").val(),mobile:$("#mobile").val()},
					success:function(data) {    
				        console.log(data);
						if(data =='0'){
							alert("内部出现错误，请联系维护人员");
							return;
						}
						if(data =='1'){
							alert("设置成功，请尽快告知用户验证码");
							return;
						}
						if(data=='2'){
							alert("短信通道的原因，发送失败，请联系维护人员");
							return;
						}
				     }
				});
			})
		});
		// 更新万能验证码
		$("#saveuniversalcode").on("click",function(){
			var isopen=$('input[name="usecode"]:checked').val();
			var flag =document.getElementById("codeid").value;
			var code =document.getElementById("universalcode").value;
			var reg=/^\d{4}$/;
			if(!reg.test(code)){
				alert("请填写正确的验证码");
				$("#universalcode").focus();
				return;
			}
			if(flag=="0"){
				/***这里是调用添加的操作*/ 
				$.ajax({
					type:'get',
					url:'${ctx}/universalcode/create',
					data:{'code':code,'isopen':isopen},
					success:function(data){
						if(data =="1"){
							alert("新增万能验证码成功！");
						}else{
							alert("新增万能验证码失败，请稍后再试:"+data);						
						}
						$("#myModalCode").modal('hide');
					}
				})
			}else{
				//这里调用的是更新的操作
				$.ajax({
					type:'get',
					url:'${ctx}/universalcode/update',
					data:{'code':code,'isopen':isopen,'codeid':flag},
					success:function(data){
						if(data != undefined && data !=""){
							alert("更新万能验证码成功！");
						}else{
							alert("更新万能验证码失败，请稍后再试:"+data);
						}
						
						$("#myModalCode").modal('hide');
					}
				})
			}
		});
		
		function alerta(){
			document.getElementById('inputForm').submit();
		}
	</script>
</body>
</html>
